<template>
    
    <div class="box">
        <div class="floatBtn">
            
            <el-button icon="el-icon-refresh" size="mini" type="text" @click="doQuery"></el-button>
        </div>
        <div class="title">基金列表</div>
        <div class="list pb2 bline">
            <el-row v-for="(item,idx) in list" :key="idx" class="mt5" :title="item.code" :class="getRateColor(item.rate)">
                
                <span class="colspanmid">
                    
                    <el-popover placement="right" :open-delay="500" trigger="hover" @show="item.showTimeLine=true" @hide="item.showTimeLine=false">
                        <div style="min-height:400px;display:flex;flex-direction:column;flex-wrap:nowrap">
                            <el-image style="width: 300px; height: 200px" v-if="item.showTimeLine" 
                                :src="`http://j4.dfcfw.com/charts/pic6/${item.code}.png?v=${rnd}`" fit="fill"></el-image>

                            <el-image style="width: 300px; height: 200px" v-if="item.showTimeLine" 
                                :src="`http://j3.dfcfw.com/images/JJJZ1/${item.code}.png?v=${rnd}`" fit="fill"></el-image>
                        </div>
                        
                        <a target="_blank" slot="reference" :href="'http://fund.eastmoney.com/'+item.code+'.html?spm=search'">
                            <span class="fsize" :class="getRateColor(item.rate)">{{item.name}}</span>
                        </a>
                        <!-- <span style="text-decoration:underline" slot="reference">{{item.name}}</span> -->
                    </el-popover>
                    <!-- <a target="_blank" :href="'http://fund.eastmoney.com/'+item.code+'.html?spm=search'">
                        <span class="fsize" :class="getRateColor(item.rate)">{{item.name}}</span>
                    </a> -->
                </span>
                <span class="colspan ml5">
                    
                    <popList :code="item.code" :fconfig="{realCode:'zcCode',code:'zcName',name:'ccRate',cur:'price',rate:'rate'}" sortBy="ccRate"
                        :url="'http://fund.10jqka.com.cn/web/fund/stockAndBond/++code++?'"
                        @addToFav="addToFavStock"
                    ></popList>

                </span>
                <span class="colspan">{{item.rate}}%</span>
                <span class="colspan">
                    <i class="el-icon-top black" @click="moveUp(idx)"></i>
                    <i class="el-icon-bottom black" @click="moveDown(idx)"></i>
                    <i class="el-icon-delete black" @click="delItem(idx)"></i>
                </span>
                

                
            </el-row>
        </div>
    </div>
</template>

<script>
import popList from "../publist/popList"

export default {
    components:{
        popList
    },
    data() {
        return {
            timer: null,
            rnd : Math.random()
        }
    },
    inject: ['cfg',"isQry","getSleepTime","isMoneyException","addException"],
    computed:{
        list(){
            return this.cfg.jjList || [];
        }
    },

    mounted() {
        this.startTimer();
    },

    methods: {
        addToFavStock(selitem){
            var list = this.cfg.favList;
            var tmplist = list.filter((item)=>{return item.c == selitem.zcCode})
            if(tmplist.length>0){
                this.$message.error("已存在");
                return;
            }
            var item = {
                "c":selitem.zcCode,"n":selitem.zcName,"p":"","r":"","watch":false
                };
            list.push(item);
        },
        doQuery(){
            this.getAllDetail();
        },
        startTimer(){
            this.getAllDetail();
            this.$once('hook:beforeDestroy', () => {   
                clearTimeout(this.timer);
            })
            this.doTimer();
        },
        doTimer(){
            clearTimeout(this.timer);
            this.rnd=Math.random();
            if(this.isQry()){
                this.getAllDetail();
            }
            var sleep = this.cfg.sleepTime|| this.$config.defSleepTime;
            if(sleep<1000 || isNaN(sleep)) sleep = this.$config.defSleepTime;

            this.timer = setTimeout(()=>{
                this.doTimer();
            },sleep);
        },
        getAllDetail(){
            this.list.map((item)=>{
                this.getDetail(item);
            });
        },
        getDetail(item){
            this.$axios.get(`http://fundgz.1234567.com.cn/js/${item.code}.js?`+Math.random())
            .then((res) => {
                try{
                    res.data = res.data.substring(8,res.data.length-2) ;
                    try{
                    res.data = JSON.parse(res.data);
                    }catch(ex){
                    return;
                    }
                    item.rate = res.data.gszzl;
                    item.price = res.data.dwjz*1;
                    item.newprice = res.data.gsz*1;
                    if(!item.name){
                        item.name = res.data.name.substring(0,6);
                    }
                }catch(ex){
                    return;
                    console.log("获取基金信息异常:")
                    console.log(ex)
                    this.$message.error(ex.message);
                }
            })
        },
        delItem(idx){
            
            this.$confirm('确认要删除该记录？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                var item = this.list.splice(idx,1);
            });
        },
        moveUp(idx){
            if(idx==0) return;
            var item = this.list.splice(idx,1);
            this.list.splice(idx-1,0,item[0]);
        },
        moveDown(idx){
            if(idx==this.list.length-1) return;
            var item = this.list.splice(idx,1);
            this.list.splice(idx+1,0,item[0]);
        }
    }
}
</script>


